import {
  ArrowLeftOutlined,
  DownOutlined,
  FormOutlined,
  PaperClipOutlined,
  UploadOutlined,
  UpOutlined
} from '@ant-design/icons';
import { Image, List, message, Timeline, Tooltip } from 'antd';
import { CSSProperties, useEffect, useState } from 'react';
import { TextArea } from '../../baseComponent';
import { Form } from '../../configComponent';
import { Button, Tabs, ToolBar, useModal } from '../../functionalComponent';
import { getIUPFilePreviewUrl, iup, Layout, useAsyncEffect, useRefCallback } from '../../util';
import {
  addSubTaskIcon,
  arrowDownIcon,
  arrowDownIcon1,
  arrowDownIcon2,
  arrowUpIcon,
  manIcon,
  nextIcon,
  qipaoIcon,
  reassignIcon,
  rollbackIcon,
  signatureIcon,
  submitIcon,
  subProcessIcon,
  taskRetrieveIcon,
  terminateIcon,
  todoIcon
} from './constVar';
import { getCommonWordHelp, getNextUserTaskNodes, getSignatureByUser, getToDoInfo, getWorkFlowHis } from './service';
import { NGLang, showFlowInfoByPiId, showTaskAttachment, wfModal } from './util';
import WFApprovalProgress from './WFApprovalProgress';
import { WFCommonPhrases } from './WFCommonPhrases';
// import './index.less'

const webkitLineClampStyle: CSSProperties = {
  display: '-webkit-box',
  WebkitBoxOrient: 'vertical',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  WebkitLineClamp: 2,
  lineHeight: '1.5em'
};

const IcontMapp = {
  '1': submitIcon,
  '2': submitIcon, // 会签的同意/提交
  '3': rollbackIcon, // 会签的驳回/回退
  '4': rollbackIcon,
  '5': addSubTaskIcon,
  '6': reassignIcon,
  '90': taskRetrieveIcon,
  '99': terminateIcon,
  '999': todoIcon,
  '9999': nextIcon
};
const approvalPointRener = (riskLevel) => {
  let approvalPointItem = { color: '#00CC33', name: '无风险' };
  switch (riskLevel) {
    case 1:
      approvalPointItem = { color: '#00CC33', name: '无风险' };
      break;
    case 2:
      approvalPointItem = { color: '#0081CC', name: '低' };
      break;
    case 3:
      approvalPointItem = { color: '#FE890C', name: '中' };
      break;
    case 4:
      approvalPointItem = { color: 'red', name: '高' };
      break;
  }
  return approvalPointItem;
};

const InitWrapStyle = {
  width: '460px',
  backgroundColor: '#FFFFFF'
};
// 附言内容dom
const postScriptListDom = (list) => {
  return (
    <>
      {list &&
        list.length &&
        list.map((v, idx) => {
          return (
            <div
              key={v.id}
              style={{
                padding: '6px 0',
                borderBottom: idx === list.length - 1 ? 'none' : '1px solid rgba(0, 0, 0, .06)'
              }}
            >
              <div style={{ ...webkitLineClampStyle, width: '100%', maxHeight: '46px' }}>
                <Tooltip title={v.postScript}>
                  <span>{v.postScript}</span>
                </Tooltip>
              </div>
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  fontSize: 12,
                  padding: '3px 0'
                }}
              >
                <span>{v.insertDt}</span>
                {!!v.fileCount && (
                  <span onClick={() => showTaskAttachment(v, 0)} style={{ color: '#0D81CC' }}>
                    <PaperClipOutlined />
                    (x{v.fileCount})
                  </span>
                )}
              </div>
            </div>
          );
        })}
    </>
  );
};
// 附言展开收起
const postScirptListCollapse = (postScriptList: [], index, opened, toggleShowMorePostScript) => {
  let text = opened ? '收起' : '展开更多';
  let icon = opened ? <UpOutlined /> : <DownOutlined />;
  const list: any = opened ? postScriptList : postScriptList.slice(0, 1);
  const renderText = () => {
    return (
      <>
        {postScriptListDom(list)}
        <div
          style={{ height: '26px', fontSize: 12, color: '#0D81CC' }}
          onClick={() => toggleShowMorePostScript(index, opened)}
        >
          <span>
            {text} {icon}
          </span>
        </div>
      </>
    );
  };
  return <div>{renderText()}</div>;
};

//字数超出的展开和收起逻辑
const TextExpandCollapse = (text, expanded, index, toggleExpand) => {
  const maxChars = 75; // 最大字符数
  const renderText = () => {
    if (expanded) {
      return (
        <>
          {text}
          <span
            onClick={() => {
              toggleExpand(index, expanded);
            }}
            style={{ cursor: 'pointer', color: 'blue' }}
          >
            收起
          </span>
        </>
      );
    }

    const shouldExpand = text.length > maxChars;
    return (
      <>
        {shouldExpand ? `${text.slice(0, maxChars - 4)}...` : text}
        {shouldExpand && (
          <span
            onClick={() => {
              toggleExpand(index, expanded);
            }}
            style={{ cursor: 'pointer', color: '#0D81CC' }}
          >
            查看全部
          </span>
        )}
      </>
    );
  };

  return <div>{renderText()}</div>;
};
//处理子流程节点的数据
const convertToTree = (data) => {
  // 获取从子节点开始节点的顺序子节点
  const map = new Map(); // 使用Map来存储节点数据，以id作为键
  const root: any[] = []; // 存储最终的树结构
  const newData = data.reverse();

  const startNodeId = newData[0]?.nodeId;
  const getSubProcessInstances = (data, parentNode) => {
    const subProcessInstances: any[] = [];
    let currentIndex = data.findIndex((item) => item.id === parentNode.id);
    while (currentIndex <= data.length - 1) {
      let item = data[currentIndex];
      // 子流程发起节点隐藏
      if (item.isSubProcessInstance && !item.isNodeHidden) {
        subProcessInstances.push(item);
      }
      if (data[currentIndex + 1]?.nodeId !== startNodeId) {
        currentIndex++;
        continue;
      } else {
        break;
      }
    }
    return subProcessInstances;
  };

  newData.forEach((item) => {
    if (!item.isSubProcessInstance) {
      map.set(item.id, item);
    } else {
      if (item.isSubProcessInstance && item.nodeId === startNodeId) {
        map.set(item.id, { ...item, children: [] });
      }
    }
  });

  map.forEach((item) => {
    if (item.hasOwnProperty('children')) {
      const childrenNodes = getSubProcessInstances(newData, item).reverse();
      item.children.push(...childrenNodes);
    }
    root.push(item);
  });
  return root.reverse();
};
let hisData: any = []; //流程数据
let superProcInstId; //父流程实例id
const WfHistoryTimeline = ({ workFlowInfo, histroyTimeLineState = true }) => {
  const [historyList, setHistoryList] = useState(new Array());
  // let hisData: any = [];//主流程数据

  let toggleStateList: any = [];
  //节点toggle切换
  const handleToggleContent = (index, state) => {
    toggleStateList[index] = !state;
    const hisDom = dataToDom(hisData);
    setHistoryList(hisDom);
  };
  let toggleApprovalPointsStateList: any = [];
  //节点内审批要点toggle切换
  const handleToggleApprovalPoints = async (index, state) => {
    toggleApprovalPointsStateList[index] = !state;
    const hisDom = dataToDom(hisData);
    setHistoryList(hisDom);
  };
  let expendedStateList: any = [];
  //节点内文案内容展示收起toggle切换
  const toggleExpand = (index, state) => {
    expendedStateList[index] = !state;
    const hisDom = dataToDom(hisData);
    setHistoryList(hisDom);
  };
  let postScriptStateList: any = [];
  const toggleShowMorePostScript = (index, state) => {
    postScriptStateList[index] = !state;
    const hisDom = dataToDom(hisData);
    setHistoryList(hisDom);
  };

  //因为Timeline组件需要每次获取新的配置才会生效,所以存一份从接口来的数据 用于每次更新
  const dataToDom = (data) => {
    return data.map((i, index) => {
      return {
        label: (
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              textAlign: 'center',
              marginRight: '-120px'
            }}
          >
            <div style={{ color: '#333333 ' }}>{i.actionName}</div>
            <div style={{ fontSize: '12px', width: '72px', color: '#666666 ' }}>{i.time}</div>
          </div>
        ),
        children: !i.isSubProcessInstance ? (
          <div style={{ height: !toggleStateList[index] ? 'auto' : '60px' }}>
            <div
              onClick={() => {
                handleToggleContent(index, toggleStateList[index]);
              }}
              style={{
                width: '287px',
                height: '30px',
                backgroundColor: '#F2F3F4',
                display: 'flex',
                alignItems: 'center',
                paddingLeft: '27px',
                cursor: 'pointer'
              }}
            >
              <span style={{ width: '10px' }}>{!toggleStateList[index] ? arrowUpIcon : arrowDownIcon}</span>
              <span style={{ width: '20px', margin: '0 7px', paddingTop: '6px' }}>{manIcon}</span>
              <span style={{ fontWeight: 'bold' }}>{i.nodeName}</span>
            </div>
            {!toggleStateList[index] && (
              <>
                <div style={{ margin: '11px 0 6px  33px' }}>{i.userName}</div>
                <div style={{ fontSize: '12px', width: '287px', color: '#666666 ', paddingLeft: '33px' }}>
                  {TextExpandCollapse(i.message, expendedStateList[index], index, toggleExpand)}
                </div>
                {!!i.postScriptList && (
                  <div
                    style={{
                      backgroundColor: '#F2F3F4',
                      borderRadius: '4px',
                      width: '260px',
                      margin: '11px 0px 6px 25px',
                      cursor: 'pointer',
                      padding: '0 6px',
                      height: postScriptStateList[index] ? 'auto' : '104px'
                    }}
                  >
                    {postScirptListCollapse(
                      i.postScriptList,
                      index,
                      postScriptStateList[index],
                      toggleShowMorePostScript
                    )}
                  </div>
                )}
                {!!i.fileCount && (
                  <div style={{ fontSize: '12px', width: '62px', color: '#666666 ', marginLeft: '33px' }}>
                    附件:
                    <span style={{ color: '#0D81CC' }}>
                      <PaperClipOutlined
                        onClick={() => {
                          showTaskAttachment(i, 0);
                        }}
                      />
                      {i.fileCount}
                    </span>
                  </div>
                )}
                {!!i.approvalPoints && (
                  <div
                    style={{ fontSize: '12px', width: '287px', marginLeft: '33px', color: '#666666', marginTop: '5px' }}
                  >
                    <span
                      onClick={() => {
                        handleToggleApprovalPoints(index, toggleApprovalPointsStateList[index]);
                      }}
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        color: '#000000',
                        fontSize: '14px',
                        fontWeight: 'bold',
                        cursor: 'pointer',
                        position: 'relative',
                        left: '-34px'
                      }}
                    >
                      {toggleApprovalPointsStateList[index] ? arrowDownIcon1 : arrowDownIcon2}
                      <span style={{ marginLeft: '5px' }}>审批要点:</span>
                    </span>
                    {toggleApprovalPointsStateList[index] &&
                      i.approvalPointRuntimeDtoList.map((j, index) => {
                        return (
                          <div style={{ marginTop: '10px' }}>
                            <div>
                              <span
                                style={{
                                  display: 'inline-block',
                                  width: '16px',
                                  height: '16px',
                                  borderRadius: '50%',
                                  backgroundColor: '#0081cc',
                                  color: '#ffffff',
                                  textAlign: 'center',
                                  fontSize: '12px',
                                  lineHeight: '16px',
                                  marginRight: '2px'
                                }}
                              >
                                {index + 1}
                              </span>
                              <span style={{ fontWeight: 'bold' }}>{j.name}</span>
                            </div>
                            <div style={{ marginLeft: '18px' }}>{j.description}</div>
                            <div
                              style={{
                                color: approvalPointRener(j.details?.[0].riskLevel).color,
                                marginLeft: '18px',
                                marginBottom: '5px',
                                fontWeight: 'bold'
                              }}
                            >
                              {approvalPointRener(j.details?.[0].riskLevel).name}
                            </div>
                            <div
                              style={{
                                width: 'max-content',
                                border: '1px solid #0281CC',
                                borderRadius: '3px',
                                marginLeft: '18px',
                                padding: '3px 6px 3px 6px',
                                color: '#0281CC',
                                backgroundColor: '#E5F8FF '
                              }}
                            >
                              {j.details?.[0].optionValue}
                            </div>
                            {j.details?.[0].remark && <div>备注：{j.details?.[0].remark}</div>}
                          </div>
                        );
                      })}
                  </div>
                )}
                {!!i.nextDataList &&
                  i.nextDataList.map((v) => (
                    <>
                      <div
                        style={{
                          width: '287px',
                          height: '30px',
                          backgroundColor: '#F2F3F4',
                          display: 'flex',
                          alignItems: 'center',
                          paddingLeft: '27px',
                          cursor: 'pointer'
                        }}
                      >
                        <span style={{ width: '20px', margin: '0 7px 0 17px', paddingTop: '6px' }}>{manIcon}</span>
                        <span style={{ fontWeight: 'bold' }}>{v.nodeName}</span>
                      </div>
                      <div>
                        <div style={{ width: '287px', margin: '11px 0px 6px 33px' }}>{v.userName}</div>
                      </div>
                    </>
                  ))}
              </>
            )}
          </div>
        ) : (
          <div
            style={{
              height: '50px'
            }}
          >
            <div
              onClick={() => {
                getHistoryList(i.processInstanceId);
              }}
              style={{
                width: '287px',
                height: '30px',
                backgroundColor: '#F2F3F4',
                display: 'flex',
                alignItems: 'center',
                paddingLeft: '22px',
                cursor: 'pointer'
              }}
            >
              <span style={{ width: '20px', margin: '0 7px', paddingTop: '6px' }}>{subProcessIcon}</span>
              <span style={{ fontWeight: 'bold' }}>子流程</span>
            </div>
          </div>
        ),
        dot: <span>{IcontMapp[i.action ? i.action : '1']}</span>
      };
    });
  };

  // 获取流程数据并更新
  const getHistoryList = async (procInstId) => {
    hisData = await getWorkFlowHis({ procInstId });
    superProcInstId = hisData?.filter((i) => !i.isSubProcessInstance)?.[0]?.superProcInstId;
    if (workFlowInfo.taskId) {
      const todoData = await getToDoInfo(workFlowInfo.taskId); //把待办信息也塞到流程树，方便展示
      if (todoData) {
        hisData.unshift({
          action: '999',
          actionName: '待办',
          userName: todoData.userName,
          message: `停留${todoData.duration}`,
          nodeName: todoData.nodeName
        });
      }
      // 下一人工任务节点信息塞到流程树
      const nextData = await getNextUserTaskNodes(workFlowInfo.taskId);
      // 如果并行数据大于1条, 取接口第一个数据作为最外层,其余数据为内层
      if (nextData && Array.isArray(nextData) && nextData.length) {
        let nextFirstData: any = {
          action: '9999',
          actionName: '即将流向',
          message: '',
          ...nextData.shift()
        };
        if (nextData.length > 0) {
          nextFirstData.nextDataList = [...nextData];
        }
        hisData.unshift({ ...nextFirstData });
      }
    }
    const hisDom = dataToDom(hisData);

    setHistoryList(hisDom);
  };

  useAsyncEffect(async () => {
    getHistoryList(workFlowInfo.procInstId);
  }, [workFlowInfo.procInstId, workFlowInfo.taskId]);

  return (
    <>
      {superProcInstId && (
        <div
          onClick={() => getHistoryList(superProcInstId)}
          style={{
            cursor: 'pointer',
            marginBottom: '22px'
          }}
        >
          <ArrowLeftOutlined /> 返回主流程
        </div>
      )}
      <Timeline
        style={{ position: 'relative', left: '-100px', display: histroyTimeLineState ? 'block' : 'none' }}
        mode={'left'}
        items={historyList}
      />
    </>
  );
};

const ProcessItem = (options, workFlowInfo, taskDealInfo, icommonWordHelp, getSignatureId) => {
  const [histroyTimeLineState, setHistroyTimeLine] = useState(true);
  const [commonWordHelp, setCommonWordHelp] = useState(icommonWordHelp);
  const [commonWordListShow, setCommonWordListShow] = useState(false);
  const [signatureId, setSignatureId] = useState('');
  const onSuggestChange = useRefCallback((sv) => {
    iup
      .getCmp('SuggestValue')
      .getApi()
      .setValue(sv || '');
  });

  // 打开审批进度弹窗
  const openApprovalProgressModal = () => {
    wfModal({
      title: NGLang.approvalProgress,
      closable: true,
      width: 800,
      content: <WFApprovalProgress taskId={workFlowInfo.taskId} />
    });
  };

  // 在toolbar上增加工作流相关按钮
  const buttons = new Array();
  // 提交
  if (workFlowInfo.processOperateOptions.submit != undefined) {
    buttons.push({
      id: 'wfbtn_taskcomplete',
      text: NGLang.btnSubmit,
      icon: '',
      onClick: async () => {
        taskDealInfo.action = workFlowInfo.processOperateOptions.submit.operation;
        workFlowInfo.minCommentLen = workFlowInfo.processOperateOptions.submit.minCommentLength;
        workFlowInfo.needsignature = workFlowInfo.processOperateOptions.submit.requiredSignature;
        await options.taskComplete(0);
      }
    });
  }
  //同意
  if (workFlowInfo.processOperateOptions.agree != undefined) {
    buttons.push({
      id: 'wfbtn_agree',
      text: NGLang.btnAgree,
      icon: '',
      onClick: async () => {
        taskDealInfo.action = workFlowInfo.processOperateOptions.agree.operation;
        workFlowInfo.minCommentLen = workFlowInfo.processOperateOptions.agree.minCommentLength;
        workFlowInfo.needsignature = workFlowInfo.processOperateOptions.agree.requiredSignature;
        await options.taskComplete(0);
      }
    });
  }
  // 不同意
  if (workFlowInfo.processOperateOptions.disagree != undefined) {
    buttons.push({
      id: 'wfbtn_disagree',
      text: NGLang.btnDisagree,
      icon: '',
      onClick: async () => {
        taskDealInfo.action = workFlowInfo.processOperateOptions.disagree.operation;
        workFlowInfo.minCommentLen = workFlowInfo.processOperateOptions.disagree.minCommentLength;
        workFlowInfo.needsignature = workFlowInfo.processOperateOptions.disagree.requiredSignature;
        await options.taskComplete(40);
      }
    });
  }
  // 驳回
  if (workFlowInfo.processOperateOptions.rollback != undefined) {
    buttons.push({
      id: 'wfbtn_rollback',
      text: NGLang.btnrollback,
      icon: '',
      onClick: async () => {
        workFlowInfo.minCommentLen = workFlowInfo.processOperateOptions.rollback.minCommentLength;
        workFlowInfo.needsignature = workFlowInfo.processOperateOptions.rollback.requiredSignature;
        await options.rollBack(0);
      }
    });
  }
  // 转签
  if (workFlowInfo.processOperateOptions.reassign != undefined) {
    buttons.push({
      id: 'wfbtn_transmit',
      text: NGLang.btntransmit,
      icon: '',
      onClick: async () => {
        workFlowInfo.minCommentLen = workFlowInfo.processOperateOptions.reassign.minCommentLength;
        workFlowInfo.needsignature = workFlowInfo.processOperateOptions.reassign.requiredSignature;
        await options.taskReassign(1);
      }
    });
  }
  // 加签
  if (workFlowInfo.processOperateOptions.addSubTask != undefined) {
    buttons.push({
      id: 'wfbtn_addsubtis',
      text: NGLang.btnAddsubtis,
      icon: '',
      onClick: async () => {
        workFlowInfo.minCommentLen = workFlowInfo.processOperateOptions.addSubTask.minCommentLength;
        workFlowInfo.needsignature = workFlowInfo.processOperateOptions.addSubTask.requiredSignature;
        await options.addSubTasks(1);
      }
    });
  }
  // 终止
  if (workFlowInfo.processOperateOptions.terminate != undefined) {
    buttons.push({
      id: 'wfbtn_terminate',
      text: NGLang.btnAbort,
      icon: '',
      onClick: async () => {
        workFlowInfo.minCommentLen = workFlowInfo.processOperateOptions.terminate.minCommentLength;
        workFlowInfo.needsignature = workFlowInfo.processOperateOptions.terminate.requiredSignature;
        await options.flowTerminate(1);
      }
    });
  }
  //审批要点
  if (Array.isArray(workFlowInfo.approvalPoints)) {
    if (workFlowInfo.approvalPoints.length > 0) {
      buttons.push({
        id: 'wfbtn_approvalPoint',
        text: NGLang.approvalPoint,
        icon: '',
        onClick: () => options.approvalPoints(false)
      });
    }
  }
  // 抄送权限最低放到最后
  if (workFlowInfo.processOperateOptions.copy != undefined) {
    buttons.push({
      id: 'wfbtn_carboncopy',
      text: NGLang.carbonCopy,
      icon: '',
      onClick: () => options.carbonCopy()
    });
  }
  //签章密码弹窗
  const SignaturePasswordModal = ({ data }) => {
    const [ins] = useModal();
    const config = [
      {
        name: 'name',
        label: '签章名称',
        xtype: 'Input',
        disabled: true
      },
      {
        name: 'Password',
        label: '签章密码',
        xtype: 'Password',
        require: true
      }
    ];
    return <Form value={data} colspan={1} config={config} />;
  };
  //签章逻辑
  const getSignatureInfo = async () => {
    const data = await getSignatureByUser();
    if (data) {
      if (data.password && data.password.length > 0) {
        const res = await wfModal({
          title: NGLang.signaturePassword,
          width: 600,
          content: <SignaturePasswordModal data={data} />
        });
        if (res) {
          if (data.Password !== iup.CryptoJS.decode(data.password)) {
            message.error(NGLang.pwdError);
          } else {
            getSignatureId(data.fileId);
            setSignatureId(getIUPFilePreviewUrl(data.fileId).url);
          }
        }
      } else {
        getSignatureId(data.fileId);
        setSignatureId(getIUPFilePreviewUrl(data.fileId).url);
      }
    } else {
      message.warning('请先维护个人签章!');
    }
  };
  return (
    <Layout>
      <ToolBar id="toolBar_WFVerticalPanel" buttons={buttons} />
      <TextArea id="SuggestValue" rows={4} placeholder={NGLang.emptyRemarkInfo} />
      <div style={{ position: 'relative' }}>
        <span
          onClick={() => {
            setCommonWordListShow(!commonWordListShow);
          }}
          style={{ position: 'absolute', cursor: 'pointer', left: '12px', top: '-30px', zIndex: '50' }}
        >
          {qipaoIcon}
        </span>
        <span
          onClick={() => {
            getSignatureInfo();
          }}
          style={{ position: 'absolute', cursor: 'pointer', left: '42px', top: '-30px', zIndex: '50' }}
        >
          {signatureIcon}
        </span>
        <div
          style={{
            display: commonWordListShow ? 'block' : 'none',
            position: 'absolute',
            zIndex: '999',
            top: '5px'
          }}
        >
          <List
            style={{
              height: '238px',
              overflowY: 'scroll',
              backgroundColor: '#ffffff',
              width: '460px',
              border: '2px solid rgba(5, 5, 5, 0.06)',
              paddingLeft: '20px'
            }}
            header={
              <div style={{ width: '100%', textAlign: 'right', paddingRight: '15px' }}>
                <FormOutlined
                  style={{ color: '#0081CC' }}
                  onClick={() => {
                    wfModal({
                      title: NGLang.commonPhrases,
                      width: 800,
                      cancelText: '',
                      content: (
                        <WFCommonPhrases
                          callback={() => {
                            getCommonWordHelp().then((res) => {
                              setCommonWordHelp(res);
                            });
                          }}
                        />
                      )
                    });
                  }}
                />
              </div>
            }
            dataSource={commonWordHelp}
            renderItem={(item: any) => {
              return (
                <List.Item>
                  <List.Item.Meta
                    description={
                      <div
                        style={{
                          width: '300px',
                          whiteSpace: 'nowrap',
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          cursor: 'pointer',
                          color: '#333333',
                          fontWeight: 'bold'
                        }}
                        onClick={() => {
                          setCommonWordListShow(false);
                          onSuggestChange(item.content);
                        }}
                      >
                        {item.content}
                      </div>
                    }
                  />
                </List.Item>
              );
            }}
          />
        </div>

        {/* <Select
          onChange={onSuggestChange}
          options={commonWordHelp.map((i) => ({ label: i.content, value: i.id }))}
          style={{ width: '200px' }}
          size="small"
        /> */}
      </div>
      {workFlowInfo.mustUploadApprovalAttachment && (
        <div
          style={{
            display: 'flex',
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            marginTop: '14px'
          }}
        >
          <div></div>
          <Button
            onClick={async () => {
              options.processAttachment();
            }}
          >
            <UploadOutlined />
            上传附件
          </Button>
        </div>
      )}
      {signatureId && (
        <div
          style={{
            width: '100%',
            border: '1px solid rgba(0, 0, 0, .06)',
            marginTop: '5px'
          }}
        >
          <Image src={signatureId} />
        </div>
      )}
      <div
        style={{
          width: '100%',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          paddingTop: '18px'
        }}
      >
        <span>审批进度</span>
        <span style={{ color: '#008ee0', cursor: 'pointer' }} onClick={openApprovalProgressModal}>
          {workFlowInfo.processProgress}
        </span>
      </div>
      <Layout.Flex style={{ paddingTop: '18px' }}>
        <div
          style={{ cursor: 'pointer', marginBottom: '22px', display: 'flex', alignItems: 'center' }}
          onClick={() => {
            setHistroyTimeLine(!histroyTimeLineState);
          }}
        >
          <span>审批历史</span>
          <span style={{ paddingLeft: '7px', paddingTop: '4px' }}>
            {histroyTimeLineState ? arrowDownIcon1 : arrowDownIcon2}
          </span>
        </div>
        <WfHistoryTimeline workFlowInfo={workFlowInfo} histroyTimeLineState={histroyTimeLineState} />
      </Layout.Flex>
      <div
        style={{ color: '#0D81CC', textAlign: 'right', cursor: 'pointer' }}
        onClick={() => {
          showFlowInfoByPiId(workFlowInfo.procInstId);
        }}
      >
        查看流程图
      </div>
    </Layout>
  );
};

const renderItems = (options, workFlowInfo, taskDealInfo, commonWordHelp, getSignatureId) => {
  return [
    // {
    //     key: '1',
    //     label: '审批要点',
    //     children: '审批要点',
    // },
    {
      key: '2',
      label: '审批办理',
      children: ProcessItem(options, workFlowInfo, taskDealInfo, commonWordHelp, getSignatureId)
    }
  ];
};
/**
 * 审批流竖版组件
 * @param options 相关配置
 * @constructor
 */
export function WFVerticalPanel({
  options,
  workFlowInfo,
  taskDealInfo,
  styles = undefined,
  commonWordHelp,
  getSignatureId
}) {
  const wrapStyle = styles ? styles : InitWrapStyle;
  useEffect(() => {}, []);
  return (
    <Layout style={wrapStyle}>
      <Tabs
        defaultActiveKey="2"
        items={renderItems(options, workFlowInfo, taskDealInfo, commonWordHelp, getSignatureId)}
        // onChange={onChange}
        centered
      />
    </Layout>
  );
}
